import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageLoading from '@/components/PageLoading';
import { Card, Button, Icon, Modal, message, Form, Input, Checkbox, Col, Row,Tag,Select  } from 'antd';
import styles from './index.less';
import delImg from '@/assets/dialog/del1.png';
import addImg from '@/assets/dialog/add1.png';

const { Option } = Select;
const formItemLayout = {
  labelCol: { span: 1 },
  wrapperCol: { span: 20 },
};

class SlotSelect extends Component {
  constructor(props) {
    super(props);
  }

  addSlot=()=>{
    const {slots,paramType} = this.props;
    if(paramType){
      slots.push({selected:""});
    }else{
      slots.push('');
    }
    this.props.upData(slots)
  };

  handleSlotSelectChange=(value,index)=>{
    const {selected,paramType} = this.props;
   if(paramType){
     selected[index].selected = value;
   }else{
     selected[index] = value;
   }

    this.props.upSelected(selected)
  };

  forMap = (tag,index) => {
    const {dialogSlots,selected,paramType} = this.props;
    const OptionElem = dialogSlots.map(this.forMapSlotsOption);

    return (
      <span style={{marginLeft: 15,display:"inline-block",marginTop:10}} className={styles.slotItemEle} key={index}>
        <span className={styles.slotNumber}>{index+1}</span>
        {
          !paramType ?
            <Select size='large' className={styles.selectSlot}  value={selected[index] !== ''?selected[index]:'none'} key={index} style={{ width: 115,marginLeft:5, boxShadow: "0 2px 15px 0 rgba(0, 0, 0, 0.15) !important"}} onChange={(value)=>this.handleSlotSelectChange(value,index)}>
              <Option value='none'>选择词槽</Option>
              {OptionElem}
            </Select>
            :
            <Select size='large' className={styles.selectSlot} value={selected[index].selected !== ''?selected[index].selected:'none'} key={index} style={{ width: 120,marginLeft:5,boxShadow: "0 2px 15px 0 rgba(0, 0, 0, 0.15) !important" }} onChange={(value)=>this.handleSlotSelectChange(value,index)}>
              <Option value='none'>选择词槽</Option>
              {OptionElem}
            </Select>
        }
        <img src={delImg} alt="" height={20} style={{marginLeft:10,cursor:"pointer",marginTop:-5}} onClick={()=>this.delSlotByIndex(index)} />
      </span>
    );
  };

  forMapSlotsOption = option =>{
    return (
      <Option key={option.slotId} value={option.slotId}>{option.slotName}</Option>
    )
  };

  delSlotByIndex=(index)=>{
    const {slots} = this.props;
    slots.splice(index,1);
    this.props.upData(slots)
  };

  render() {
    const {slots} = this.props;
    let tagChild = null;
    if(slots.length>0){
       tagChild = slots.map(this.forMap);
    }
    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          <Form.Item {...formItemLayout} label="">
            <div style={{display:'inline-block',width:'100%'}}>
              {tagChild}
              <img src={addImg} alt="" height={47} style={{marginLeft:10,cursor:"pointer",marginTop:5}} onClick={()=>this.addSlot()} />
            </div>
          </Form.Item>
        </Suspense>
      </GridContent>
    );
  }
}
export default connect (({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(SlotSelect));
